<template>
  <div>
    <div>
      <el-button type="primary" @click="addEdit('add')"><i class="iconfont icon-plus"></i>添加</el-button>
    </div>
    <div>
      <el-table
        :data="mainList"
        stripe
        style="width: 100%">
        <el-table-column
          type="index"
          width="50">
        </el-table-column>
        <el-table-column
          prop="app_version"
          width="150"
          label="版本号"
        >
        </el-table-column>
        <el-table-column
          prop="remark"
          width="300"
          label="说明"
        >
        </el-table-column>
        <el-table-column
          label="更新时间"
        >
          <template slot-scope="scope">
            {{scope.row.modify_time | formatDate('yyyy/MM/dd hh:mm:ss')}}
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          width="150">
          <template slot-scope="scope">
            <el-button type="text" @click="addEdit('edit', scope.row)"><i class="iconfont icon-edit"></i>编辑</el-button>
            <el-button type="text" @click="del(scope.row)"><i class="iconfont icon-del"></i>删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        class="pagecon"
        background
        layout="prev, pager, next"
        @current-change="_mainList"
        :current-page.sync="page.curpage"
        :total="page.total">
      </el-pagination>
    </div>
    <!-- // 添加版本 -->
    <el-dialog :title="dialogTitle" :visible.sync="dialogFormVisible" @close="initData">
      <el-form ref="form" :model="form" :rules="rules">
        <el-form-item label="版本号:" label-width="120px" prop="app_version">
          <el-input placeholder="请输入" v-model="form.app_version" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="文件:" label-width="120px" prop="apk_url">
          <div class="flex">
            <UpFile @upload-success="upSuccess"></UpFile>
            <div v-if="form.apk_url" style="margin-left: 10px;">
              <el-tag
                closable
                :disable-transitions="false"
                effect="plain"
                @close="handleClose">
                <i class="iconfont icon-fujian"></i> {{form.apk_url}}
              </el-tag>
            </div>
          </div>
          
        </el-form-item>
        <el-form-item label="说明:" label-width="120px" prop="remark">
          <el-input :rows='5' type="textarea" v-model="form.remark" placeholder="新增功能
1.评论
2.回复
3.启动页"></el-input>
        </el-form-item>
        <el-form-item label="类型:" label-width="120px" prop="version_type">
          <el-radio-group v-model="form.version_type">
            <el-radio v-for="item in versionTypeList" :key="item.id" :label="item.id">{{item.name}}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="是否升级:" label-width="120px" prop="up_type">
          <el-radio-group v-model="form.up_type">
            <el-radio v-for="item in upTypeList" :key="item.id" :label="item.id">{{item.name}}</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer" >
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="doAction">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {getAppVersionList, del, addOrEditAppversion} from 'api/appUpdateAPI'
import  UpFile from 'components/upfile'
export default {
  components: {
    UpFile
  },
  computed: {
    dialogTitle(){
      if(this.dialogMode === 'add'){
        return '添加'
      }else{
        return '编辑'
      }
    }
  },
  data() {
    var validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请上传文件'));
      } else {
        callback();
      }
    }
    return {
      rules: {
        app_version: [{ required: true, message: '请输入版本号', trigger: 'blur' }],
        apk_url: [{required: true, message: '请上传文件', trigger: 'change'}, { validator: validatePass2, trigger: 'change' }],
        up_type: [{ required: true, message: '请选择是否更新', trigger: 'change' }],
        version_type: [{ required: true, message: '请输入选择包类型', trigger: 'change' }],
        remark: [{ required: true, message: '请输入版本说明', trigger: 'change' }]
      },
      versionTypeList: [{id:1, name: '全量包'}, {id:2, name: '资源包'}, {id:3, name: '差量包'}],
      upTypeList: [{id:0, name: '不升级'}, {id:1, name: '升级'}, {id:2, name: '强制升级'}],
      mainList: [],
      form: {},
      page: {
        total: 1,
        curpage: 1
      },
      dialogMode: 'add',
      dialogFormVisible: false
    }
  },
  methods: {
    handleClose() {
      this.form.apk_url = ''
    },
    doAction(){
      this.$refs.form.validate().then(()=>{
        let data = JSON.parse(JSON.stringify(this.form))
        data.app_type = 2
        addOrEditAppversion(data).then(res => {
          if(res) {
            this.dialogFormVisible = false
            this.$message({
              message: res.rMsg,
              type: 'success'
            })
            this._mainList()
          }
        })
      })
      
    },
    del(row){
      this.$confirm('是否确定删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this._delAdm(row)
      })
    },
    _delAdm(row){
      del(row.v_id).then(res => {
        this.$message({
          message: res.rMsg,
          type: 'success'
        })
        this._caozuoAfter()
      })
    },
    upSuccess(key) {
      this.form = {...this.form, apk_url: key}
    },
    addEdit(type, row){
      this.dialogMode = type
      this.dialogFormVisible = true
      this.form = {up_type: 0, version_type: 1}
      if(row){
        let data = JSON.parse(JSON.stringify(row))
        this.form = data
      }
    },
    _caozuoAfter(){
      this.dialogFormVisible = false
      this.page.curpage = 1
      this._mainList()
    },
    initData(){
      this.form = {}
    },
    _mainList(){
      getAppVersionList(this.page.curpage, {app_type: 2}).then(res => {
        this.page.total = res.pageInfo.Total
        this.mainList = res.rData
      })
    },
  },
  created(){
    this._mainList()
  }
}
</script>
<style lang="scss" scoped>
.flex{
  display: flex;
}
</style>
